<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>input元素password属性</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		h3 {
			text-align: center;
			margin: 50px 0;
		}

		form {
			width: 300px;
			margin: 10% auto;
			text-align: center;
		}

		input[type="text"],
		input[type="password"] {
			width: 100%;
			height: 22px;
			padding: 5px 8px;
			border-radius: 30px;
			line-height: 22px;
			border: 1px solid #ccc;
			margin-bottom: 10px;
		}

		input[type="submit"],
		input[type="reset"] {
			width: 45%;
			height: 40px;
			background-color: #f40;
			border-radius: 30px;
			border: none;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
		}
	</style>

</head>

<body>
	<form action="" method="get">
		<h3>用户登录</h3>
		<input type="text" name="userid" id="userid" placeholder="请输入用户名">
		<input type="password" name="userPWD" id="userPWD" placeholder="请输入密码">
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	</form>
</body>